<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>两边固定中间自适应布局</title>
  <style>
    *{margin:0;padding:0;}
    #herder{
      height:50px;
      background:blue;
    }
    #main{
      width:100%;
      position:relative;
    }
    #main .main-left{
      width:200px;
      height:800px;
      background:red;
      position:absolute;
      left:0;
      top:0;
    }
    #main .main-center{
      height:800px;
      background:lightgreen;
      margin:0 310px 0 210px;
    }
    #main .main-right{
      width:300px;
      height:800px;
      background:pink;
      position:absolute;
      right:0;
      top:0;
    }
    #footer{
      height:50px;
      background:gray;
    }
  </style>
</head>
<body>
<div id="herder">页头</div>
<div id="main">
  <div class="main-left">左列</div>
  <div class="main-center">设计网页的第一步就是设计版面布局，搭建网站结构，网页排版的合理性，在一定程度上也影响着网站整体的布局以及后期的优化。一个好的网站形象能更容易地吸引用户、留住用户。因此，网站首页第一屏的排版非常重要，很多时候能决定用户的去与留。</div>
  <div class="main-right">右列</div>
</div>
<div id="footer">页脚</div>
</body>
</html>
